import React from 'react';
import { Form, Button, Select, Radio, Row, Col, Card, InputNumber } from 'antd';
import { connect } from 'dva';

import styles from './index.less';

const { Option } = Select;

const namespace = 'returnRoules';
/**
 *  登录界面
 */
@connect(({ loading, returnRoules }) => ({
  rouleId: returnRoules.rouleId,
  getAllStateList: returnRoules.getAllStateList,
  rulesDetail: returnRoules.rulesDetail,
  //控制状态，绑定事件
  submitting: loading.effects['login/doLogin']
}))
@Form.create()
class StepTwo extends React.Component {
  state = {
    originalPackingCharge: {
      'Only accept returns with original package': 1,
      'Accept returns with no original package without any charge': 2,
      'Accept returns with no original package with charge': 3
    }
  };
  handleInputNumber() {}
  onChange = () => {};
  // 保存数据
  handleSubmit = (e, type) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        const { rulesDetail } = this.props;
        const userInfo = JSON.parse(localStorage.getItem('userInfo'));
        delete values.Packing;
        delete values.additionalCosts2;
        delete values.additionalCosts3;
        delete values.calculation;
        values.returnLocation = values.returnLocation.join(',');
        // values.appointmentTime = values.appointmentTime.format('YYYY-MM-DD HH:mm:ss');
        values.packingCharge = values.packingCharge === 2 ? 0 : values.packingCharge === 1 ? 20 : 40;

        // if(type === "save"){
        //   this.props.dispatch({
        //     type:`${namespace}/save`,
        //     payload:{
        //       rulesDetail:values
        //     }
        //   });
        // }else{
        //   this.props.dispatch({
        //     type:`${namespace}/save`,
        //     payload:{
        //       stepCurrent:2,
        //       rulesDetail:values
        //     }
        //   });
        // }
        this.props.dispatch({
          type: `${namespace}/update`,
          payload: {
            shopsId: userInfo.shopId,
            id: rulesDetail ? rulesDetail.id : this.props.rouleId,
            ...values
          },
          callback: () => {
            if (type === 'save') return;
            this.props.dispatch({
              type: `${namespace}/save`,
              payload: {
                stepCurrent: 2
              }
            });
            this.props.dispatch({
              //查询规则详情
              type: `${namespace}/fetchRules`,
              payload: {
                id: rulesDetail ? rulesDetail.id : this.props.rouleId
              }
            });
          }
        });
      }
    });
  };
  render() {
    const { originalPackingCharge } = this.state;
    const { getAllStateList, rulesDetail } = this.props;
    const { getFieldDecorator } = this.props.form;

    return (
      <div className={styles.stepTwo}>
        <Form onSubmit={this.handleSubmit}>
          <Card title="Return days" bordered={false}>
            <Form.Item label="How many days the retailer allows the customer to return after the purchase">
              {getFieldDecorator('returnDays', {
                rules: [{ required: true, message: 'Please input Return Days!' }],
                initialValue: rulesDetail ? rulesDetail.returnDays : 1
              })(<InputNumber min={1} max={365} />)}
              <span style={{ marginLeft: '10px' }}>days</span>
            </Form.Item>
            <Form.Item label="Days calculation">
              {getFieldDecorator('originalPackingCharges', {
                initialValue: 1
              })(
                <Radio.Group style={{ width: '100%' }} value={'purchase'}>
                  <Row>
                    <Col span={24}>
                      <Radio value={1}>From the date of purchase</Radio>
                    </Col>
                  </Row>
                </Radio.Group>
              )}
            </Form.Item>
          </Card>
          <Card title="Packing" bordered={false}>
            <Form.Item label="">
              {getFieldDecorator('originalPackingCharge', {
                rules: [{ required: true, message: 'Please Input originalPackingCharge!' }],
                initialValue: rulesDetail ? originalPackingCharge[rulesDetail.originalPackingCharge] || 1 : 1
              })(
                <Radio.Group style={{ width: '100%' }}>
                  <Row>
                    <Col span={24}>
                      <Radio value={1}>Only accept returns with original package</Radio>
                    </Col>
                    <Col span={24}>
                      <Radio value={2}>Accept returns with no original package without any charge</Radio>
                    </Col>
                    <Col span={24}>
                      <Radio value={3}>Accept returns with no original package with charge</Radio>
                    </Col>
                  </Row>
                </Radio.Group>
              )}
            </Form.Item>
          </Card>
          <Card title="Return Iocation" bordered={false}>
            <Form.Item label="Please select states where return are not accepted (optional)" style={{ width: '40%' }}>
              {getFieldDecorator('returnLocation', {
                rules: [{ required: false, message: 'Please Input returnLocation!' }],
                initialValue: rulesDetail && rulesDetail.returnLocation ? rulesDetail.returnLocation.split(',') : []
              })(
                <Select
                  mode="tags"
                  onChange={value => {
                    console.log(value, 'value');
                  }}
                  onFocus={() => {
                    this.props.dispatch({
                      type: `${namespace}/getAllStateList`
                    });
                  }}
                >
                  {getAllStateList.length > 0 &&
                    getAllStateList.map(item => <Option key={item.abbreviation}>{item.abbreviation}</Option>)}
                </Select>
              )}
            </Form.Item>
          </Card>
          <Card title="Refund amount calculation" bordered={false}>
            <label>The original delivery fee is non-refundable</label><br/>
            <Form.Item label="The original delivery fee is non-refundable" style={{ display: 'none'}}>
              {getFieldDecorator('originalShipping', {
                rules: [{ required: true, message: 'Please Input originalShipping!' }],
                initialValue: rulesDetail && rulesDetail.originalShipping === 'YES' ? 0 : 1
              })(
                <Radio.Group>
                  <Radio value={0}>Yes</Radio>
                  <Radio value={1}>No</Radio>
                </Radio.Group>
              )}
            </Form.Item>
            <label>The original installation fee is non-refundable</label><br/>
            <Form.Item label="The original installation fee is non-refundable" style={{display:'none'}}>
              {getFieldDecorator('installation', {
                rules: [{ required: true, message: 'Please Input installation!' }],
                initialValue: rulesDetail && rulesDetail.installationg === 'YES' ? 0 : 1
              })(
                <Radio.Group>
                  <Radio value={0}>Yes</Radio>
                  <Radio value={1}>No</Radio>
                </Radio.Group>
              )}
            </Form.Item>
            <label>The orignal indoor delivery fee is non-refundable</label><br/>
            <Form.Item label="The orignal indoor delivery fee is non-refundable" style={{display:'none'}}>
              {getFieldDecorator('serviceFee', {
                rules: [{ required: true, message: 'Please Input serviceFee!' }],
                initialValue: rulesDetail && rulesDetail.serviceFee === 'YES' ? 0 : 1
              })(
                <Radio.Group>
                  <Radio value={0}>Yes</Radio>
                  <Radio value={1}>No</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Card>
          <Card title="Customer appointment due time" bordered={false}>
            <Form.Item label="Set the time limit customers are given to make an appointment after return request has been approved">
              {getFieldDecorator('appointmentTime', {
                rules: [{ required: true, message: 'Please Select appointmentTime!' }],
                initialValue: rulesDetail ? rulesDetail.appointmentTime : ''
              })(
                // <DatePicker showTime placeholder="Select Time" />
                <InputNumber min={1} />
              )}
              <span style={{ marginLeft: '10px' }}>days</span>
            </Form.Item>
          </Card>
          <Form.Item className={styles.btnList}>
            <Button onClick={e => this.handleSubmit(e, 'save')} className={styles.formBtn}>
              Save
            </Button>
            <Button htmlType="submit" className={styles.formBtn}>
              Next
            </Button>
          </Form.Item>
        </Form>
      </div>
    );
  }
}
export default StepTwo;
